<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
				<u-icon name="arrow-left" color="#020121" size="34"></u-icon>
			</view>
			<view class="r-name">文章列表</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}">
		<view class="tab f" :style="{marginTop: navHeiht+ 'px'}">
			<u-tabs :show-bar="false" @change="changeTab" ref="tabs1" :list="list" active-color="#020121"
				inactive-color="#606266" font-size="30" v-model="current"></u-tabs>

		</view>
		<view class="content p-32">
			<view class="list" :style="{marginTop: tabHeight+ 'px'}">
				<view class="item dispaly-center " v-for="item in 10" :key="item"
					@click="$goUrl(`/subPackage/index/articleDetail?id=${item}`)">
					<view class="cover">
						<image
							src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6"
							mode="aspectFill"></image>
					</view>
					<view class="desc">
						<view class="title over-1">堪比奢侈品的植鞣工艺，把时...</view>
						<view class="con over-2">专注原创服装研发定制专属高端辅助打造独一无二视觉美学回忆...</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight
	} from '@/utils/util'

	const current = ref(0)
	const list = ref([{
		name: '西装',
		id: 1
	}])

	const changeTab = (index) => {
		current.value = index
	}

	// 获取元素高度
	const navHeiht = ref(0)
	const tabHeight = ref(0)
	onMounted(async () => {
		for (var i = 0; i < 15; i++) {
			list.value.push({
				name: `西装${i}`,
				id: i
			})
		}
		const res = await getElementHeight('.f')
		navHeiht.value = res
		const tabRes = await getElementHeight('.tab')
		tabHeight.value = tabRes
	})
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	.r-name {
		color: #020121;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.content {
		.list {
			.item:last-child {
				margin-bottom: 0;
			}

			.item {
				margin-bottom: 24rpx;

				.cover {
					margin-right: 16rpx;

					image {
						width: 260rpx;
						height: 130rpx;
						border-radius: 20rpx;
					}
				}

				.desc {

					.title {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #3D3D3D;
						margin-bottom: 16rpx;
					}

					.con {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 24rpx;
						color: #7B7B89;
						line-height: 34rpx;
					}
				}


			}
		}
	}
</style>